MY Digital Canvas

Mobile App: YourDoc - Depression Management

YourDoc is a mobile application designed to assist users in overcoming depression by providing access to a series of courses. The high-fidelity UI design for the Splash, Sign-In, and Landing pages incorporates the brand font Roboto and the brand color #0C99FF and its shades. Various UI techniques in Figma were utilized to create visually appealing and user-friendly interfaces.

Key Interfaces

Splash Screen

  • Features the YourDoc logo with creative and attractive animation vectors.
  • Utilizes Figma's UI techniques to create visually engaging animations.
  • Incorporates the brand color #0C99FF and its shades for a cohesive brand identity.

Sign-In Page

  • Includes Text Field 1 for Email and Text Field 2 for Password.
  • Features a Checkbox for agreeing to terms and conditions.
  • Call-to-Action button "Sign in" for user authentication.
  • Utilizes attractive animation vectors and UI techniques for enhanced user experience.

Home (Landing) Page

  • Displays the user's name for personalization.
  • Includes Bottom Navigation with options for Home, Reference, Contact, and Settings.
  • Lists courses available for users to follow, with Course 2 locked until Course 1 is completed.
  • Visible progress indicators for unlocked courses.
  • Popup message displayed when attempting to access locked courses, indicating the need to complete the previous course.
  • Percentage of course completion displayed for user tracking.
  • Utilizes attractive animation vectors and various UI techniques in Figma for enhanced visual appeal and user engagement.

Skills Demonstrated

  1. UI/UX Design Principles
  2. Brand Identity Integration (Roboto font, brand color)
  3. High-fidelity UI Design
  4. Animation Vectors and UI Techniques in Figma
  5. Progress Tracking and Course Management

This high-fidelity UI design for YourDoc mobile application demonstrates the application's functionality and user flow, with a focus on providing a visually engaging and intuitive user experience to assist users in managing depression effectively.

Figma Prototype Link